<template>
  <div class="page-container">
    <div>
      <h1>404</h1>
      <h2>OOPS！你好像走丢了...</h2>
      <RouterLink
        :to="{ path: '/', replace: true }"
        class="el-button el-button--primary"
        >回到首页</RouterLink
      >
    </div>
    <img src="@/assets/imgs/404.gif" alt="" />
  </div>
</template>

<script setup lang="ts" name="NotFound"></script>

<style scoped lang="scss">
  .page-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-color: white;
    div {
      margin-right: 50px;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      gap: 20px;
      h1 {
        font-size: 60px;
        color: #409eff;
        font-weight: 600;
      }
    }
  }
</style>
